<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./fonts/图标图标/iconfont.css">
    <link rel="stylesheet" href="./css/list.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <div class="top container">
            <ul class="top-left">
                <li>中国大陆 </li>
                <li class="on_off" >
                    <span class="off active">亲,<a href="./login.html">请登录</a></span>
                    <span class="on">ykx</span>

                </li>
                <li style="margin-left: 70px;" class="regi"><a href="./register.html">免费注册</a></li>
                <li>手机逛淘宝</li>
            </ul>
            <ul class="top-right">
                <li>我的淘宝</li>
                <li><span class="iconfont icon-gouwuche"></span><a href="./cart.html">购物车</a></li>
                <li><span class="iconfont icon-shoucang2" style="color:#ccc"></span>收藏夹</li>
                <li>商品分类</li>
                <li>免费开店</li>
                <li>千牛卖家中心</li>
                <li>联系客服</li>
                <li class="web-nav">
                    <span class="iconfont icon-gengduo-2"></span>网站导航<span class="iconfont icon-xiala" style="color:#ccc;"></span>
                    <div class="nav container">
                        <div>
                            <p>特色市场</p>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                                <li>鞋子</li>
                                <li>包宝宝</li>
                            </ul>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                                <li>鞋子</li>
                                
                            </ul>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                               
                            </ul>
                        </div>
                        <div>
                            <p style="color: pink;">主体市场</p>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                                <li>鞋子</li>
                                <li>包</li>
                            </ul>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                                <li>鞋子</li>
                                
                            </ul>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                               
                            </ul>
                        </div>
                        <div>
                            <p style="color: skyblue;">精彩推荐</p>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                                <li>鞋子</li>
                                <li>包</li>
                            </ul>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                                <li>鞋子</li>
                                
                            </ul>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                               
                            </ul>
                        </div>
                        <div>
                            <p style="color: purple;">阿里APP</p>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                                <li>鞋子</li>
                                <li>包</li>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                            </ul>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                                <li>鞋子</li>
                                
                            </ul>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                               
                            </ul>
                        </div>
                        
                    </div>
                </li>
            </ul>
        </div>
    </header>
    <!-- 搜索 -->
    <div class="searchBox container">
        <p class="logo"><img src="./img/logo.png" alt=""></p>
        <div class="search">
            <div class="baobei">
                宝贝
            </div>
            <input type="text" placeholder="请输入要搜索的词" >
            <button>搜索</button>
            <ul>
            </ul>
        </div>
    </div>
    <!-- 所有宝贝 -->
    <div class="sort container">
        <div class="all">
            <div class="baby">
                <p>所有宝贝</p>
                <p>天猫</p>
                <p>二手</p>
            </div>
            <div class="item">
                <p>所有分类&emsp;></p>
                <div class="shouqi">筛选显示切换</div>
            </div>
            <!-- 分组 -->
            <ul class="group">
                <li class="mold">
                    <div class="title">
                        商品类型:
                    </div>
                    <ul>
                        <li class="gType" data-skey="clothing">上衣</li>
                        <li class="gType active" data-skey="skirt">裙子</li>
                        <li class="gType" data-skey="trousers">裤子</li>
                        <li class="gType" data-skey="neiyi">内衣</li>
                        <li class="gType" data-skey="shoes">鞋子</li>
                        <li class="gType" data-skey="bags">包包</li>
                        <li class="gType" data-skey="boyfriend">男友</li>
                        <li class="gType" data-skey="baby">母婴</li>
                        <li class="gType" data-skey="home">家居</li>
                    </ul>
                </li>
                <li class="filt">
                    <div>筛选条件:</div>
                    <ul>
                        <li class="shaixuan active" data-condition="pop">综合</li>
                        <li class="shaixuan" data-condition="sell">销量</li>
                        <li class="shaixuan" data-condition="new">新品</li>
                    </ul>
                </li>
            </ul>
            <!--排序类型 -->
            <div class="sorttype">
                <p>价格区间:</p>
                <div class="price">
                    <input type="text">
                    <span>-</span>
                    <input type="text">
                    <button>确定</button>
                </div>
                <div class="price_collection">
                    <!-- <span>80-105</span>
                    <span>80-105</span>
                    <span>80-105</span> -->
                </div>

            </div>
            
        </div>
        <!-- 商品列表 -->
        <ul class="clear">
           <!-- <li>
            <div class="pic">
                <img src="" alt="">
            </div>
            <div class="desc">
                <div class="info">
                    <p class="price">￥88.00</p>
                    <p class="baoyou">包邮</p>
                    <p class="purse">1200人付款</p>
                </div>
                <div class="title">
                    夏季新款潮流T恤
                    夏季新款潮流T恤
                    夏季新款潮流T恤
                    夏季新款潮流T恤
                    夏季新款潮流T恤
                    夏季新款潮流T恤
                    夏季新款潮流 
                </div>
                <div class="shop">
                    <p class="iconfont icon-gengduo-2"></p>
                    <p>空城计旗舰店</p>
                    <p>浙江&nbsp;杭州</p>
                </div>
                <div class="best_sallers">
                    <p class="adi">掌柜热卖</p>
                    <p><img src="./img/TMT.jpeg" alt=""></p>
                    <p><img src="./img/WW.jpeg" alt=""></p>
                </div>
            </div>
            <span class="tip1 active">HOT</span>
            <span class="tip2 active">SALE</span>
           </li>
           <li></li>
           <li></li>
           <li></li> 
           <li></li> -->
        </ul>

        <!-- 分页 -->
        <div class="pagination">
            <div class="prev">&lt;&nbsp;上一页</div>
            <div>
                <span class="current">1</span>
                <span>/</span>
                <span class="total">16</span>
            </div>
            <div class="next">下一页&nbsp;&gt;</div>
            <div class="pagesize">
                <input type="text" placeholder="1">  
            </div>
        </div>
    </div>
    <script src="./js/polyfill.js"></script>

    <script src="./vendor/utils.js"></script>
    <script src="./vendor/jquery/jquery.min.js"></script>
    <script src="./js/list.js"></script>
</body>
</html>